iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 1
1
Modern Web

30天每日死磕面试题3+1系列 第 1

30天面试题第一天

  • 分享至 

  • xImage
  •  

HTML部分

Q:页面导入样式时,使用link和@import有什么区别?
A:区别:
1.link是HTML标签,@import是css提供的。
2.link引入的样式页面加载时同时加载,@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题,@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式,而@import不可以。
5.import只可以写在内
<style>@import url(css/style.css);</style>

CSS部分

Q:清除浮动的方式有哪些及优缺点?
A:浮动带来的问题是盒子塌陷,什么是盒子塌陷?外部盒子本应该包裹住内部的浮动盒子,结果却没有。
问题出现的原因
父元素只包含浮动元素,那么它的高度就会塌缩为零(前提就是你们没有设置高度(height)属性,或者设置了为auto,就会出现这种情况,如果父元素不包含任何的可见背景,这个问题会很难被注意到。
因为子元素设置了float属性,而float属性会把元素从标准文档流中抽离,直接结果就是外部盒子丢了两个孩子,因为内部没有其它盒子了,所以外部盒子只包裹文本节点内容,却把两个内部盒子扔在外面了。
解决方案

上面分析了问题出现的原因,不难找到第一种解决方案(既然孩子丢了,那就去找呗)——给外部盒子也添加浮动
把外部盒子也从标准文档流中抽离,让它和孩子们见面。
缺点:可读性差,不易于维护(别人很难理解为什么要给父元素也添上float),而且可能需要调整整个页面布局。

在外部盒子内最下方添上带clear属性的空盒子
可以是div也可以是其它块级元素,把 放在盒内底部,用最下面的空盒子清除浮动,把盒子重新撑起来。
缺点:引入了冗余元素

用overflow:hidden清除浮动
给外部盒子添上这个属性就好了,非常简单。
缺点:有可能造成溢出元素不可见,影响展示效果。

用after伪元素清除浮动
给外部盒子的after伪元素设置clear属性,再隐藏它
这其实是对空盒子方案的改进,一种纯CSS的解决方案,不用引入冗余元素。

.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}
这也是bootstrap框架采用的清除浮动的方法。

题外话

其实还有一种最直接的办法:给每个盒子规定width和height,要多大给多大即可。但这并不算什么解决方案,因为这样的布局不是内容自适应的,但如果页面内容极少发生变动,这也是一个不错的方案,因为它的兼容性是毋庸置疑的。

JS

Q:写一个方法把下划线命名转成大驼峰命名
A:

function toCamel(str) {
  str = str.replace(/(\w)/, (match, $1) => `${$1.toUpperCase()}`)
  while(str.match(/\w_\w/)) {
    str = str.replace(/(\w)(_)(\w)/, (match, $1, $2, $3) => `${$1}${$3.toUpperCase()}`)
  }
  return str
}

console.log(toCamel('a_c_def')) // ACDef 

这个是其中一种方法,网路上也有很多的办法,希望大家自己去动手尝试,并且更加完善这一部分代码,这里主要用的是正则匹配和本来自带的toUpperCase()函数,这个在CSS中也很常见,所以在JS中自然也有相类似的方法。如果有想要学正则的话欢迎在下面评论,我会抽空写一天的正则题目来给大家!


下一篇
30天面试题第二天
系列文
30天每日死磕面试题3+19
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言